<template>
  <div class="children_content">
    <div class="add_btns_box">
      <div class="box_left">
        <div class="title">表单管理</div>
      </div>
      <div class="box_right">
        <Space>
          <Select style="width: 100px; margin-right: 16px" clearable>
            <Option v-for="item in []" :value="item.value" :key="item.value">{{
              item.label
            }}</Option>
          </Select>
        </Space>

        <Space>
          <Button type="primary">新增</Button>
        </Space>
      </div>
    </div>

    <div class="develop-container">
      <div class="develop-content" v-if="dataList.length" v-loading="loading">
        <div class="develop-content-item" v-for="(item, i) in dataList" :key="i">
          <div class="header">
            <div class="left">
              <div class="title">{{ item.name }}</div>
              <div class="description">{{ item.description }}</div>
            </div>
            <div class="right">
              <Dropdown>
                <Icon type="ios-more" />
                <template #list>
                  <DropdownMenu>
                    <DropdownItem>
                      <text-button style="width: 100%" type="del">删除</text-button>
                    </DropdownItem>
                  </DropdownMenu>
                </template>
              </Dropdown>
            </div>
          </div>
          <div class="type type-blue">智能体</div>
          <div class="datetime">xxxx·最近编辑2022-01-01 10:00:00</div>
        </div>
      </div>
    </div>

    <Page
      v-model="pageIndex"
      :page-size="pageSize"
      :total="total"
      show-elevator
      show-total
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const pageIndex = ref(1)
const pageSize = ref(30)
const total = ref(10)
const loading = ref(false)
const dataList = ref([{ name: 'xx表单', description: '321' }])
</script>

<style scoped lang="scss">
@import '../components/common.scss';
</style>
